import { Form, Icon, Input, Button, Checkbox } from 'antd';
import React,{useState,useEffect} from "react";
import styles from './login.css';
import * as api from "../until/login";
import {connect} from "dva"



class NormalLoginForm extends React.Component {
	constructor(props){
		super(props)
	}
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
		  // console.log(api)
        console.log('Received values of form: ', values);
		let _this=this
		
		api.login({username:values.username,password:values.password}).then(data=>{
			console.log(data.data)
			alert(data.data.msg)
			localStorage.setItem("token",data.data.data.token)
			localStorage.setItem("uid",data.data.data.id)
			_this.props.fn(values.username)
			_this.props.fn1(values.password)
			window.location.href="/"
		})
		
      }
    });
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSubmit} className="login-form" style={{ maxWidth: "300px",margin:"0 auto"}}>
        <Form.Item>
          {getFieldDecorator('username', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
            <Input
              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="Username"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: 'Please input your Password!' }],
          })(
            <Input
              prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
              type="password"
              placeholder="Password"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('remember', {
            valuePropName: 'checked',
            initialValue: true,
          })(<Checkbox>记住密码</Checkbox>)}
          <a className="login-form-forgot" href="" style={{ float: "right",color:"red"}}>
            忘记密码?
          </a>
          <Button type="primary" htmlType="submit" className="login-form-button" style={{ width: "100%"}}>
            登录
          </Button >
          Or <a href="/register" style={{ color: "yellow"}}>去注册!</a>
        </Form.Item>
      </Form>
    );
  }
}

const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(NormalLoginForm);
 function Index(props) {
	const [name,setName]=useState("")
	const [psd,setPsd]=useState('')
	useEffect(()=>{
		props.dispatch({
			type:"info/change",
			payload:{
				name:name
			}
		})
		console.log(name,psd)
		props.dispatch({
			type:"info/getData",
			payload:{
				
			}
		})
	})
  return (
    <div className={styles.div}>
		
		<div style={{ width:"200px",height:"50px",margin:"10px 42%"}}>
			<img style={{width:"100%",height:"100%"}} src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574246656954&di=3a83ee72d53a4de29d5b99d32f11bf75&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20151029%2Fmp38490311_1446085292402_1_th.jpeg"/>
		</div>
		<h1 style={{ color: "yellow",margin:"10px 0 10px 42%"}}>GAP 后台管理</h1>
	  <WrappedNormalLoginForm fn={(val)=>setName(val)} fn1={(val)=>setPsd(val)}/>
    </div>
  );
}

export default connect(state=>state.info)(Index)


